<template>
  <div id="monitor-page" class="main-content">
    <!-- 顶部导航栏 -->
    <el-container>
      <el-main
        style="
          padding: 10px;
          background-color: #0c1e3e;
          height: calc(100vh - 60px);
        "
      >
        <!-- 主内容区域 -->
        <el-row :gutter="10" style="height: 100%">
          <!-- 左侧服务资源运行统计 -->
          <el-col
            :span="6"
            style="display: flex; flex-direction: column; height: 100%"
          >
            <!-- 服务资源运行统计 -->
            <el-card class="custom-card" style="flex: 1">
              <div slot="header" class="card-header">
                <span style="color: #fff">服务资源运行统计</span>
              </div>
              <div class="service-stats">
                <div class="stat-item">
                  <div class="stat-number orange">1245</div>
                  <div class="stat-name">种植</div>
                </div>
                <div class="stat-item">
                  <div class="stat-number blue">1557</div>
                  <div class="stat-name">农药</div>
                </div>
                <div class="stat-item">
                  <div class="stat-number orange">4585</div>
                  <div class="stat-name">耕作</div>
                </div>
                <div class="stat-item">
                  <div class="stat-number blue">3268</div>
                  <div class="stat-name">飞防</div>
                </div>
                <div class="stat-item">
                  <div class="stat-number orange">1280</div>
                  <div class="stat-name">收割</div>
                </div>
                <div class="stat-item">
                  <div class="stat-number blue">2584</div>
                  <div class="stat-name">储藏</div>
                </div>
              </div>
            </el-card>

            <!-- 服务资源运行统计图 -->
            <el-card class="custom-card" style="margin-top: 5px; flex: 1.2">
              <div slot="header" class="card-header">
                <span style="color: #fff">服务资源运行统计图</span>
              </div>
              <div
                class="chart-container"
                style="width: 100%; height: 100%; min-height: 300px"
                ref="resourceChart"
              ></div>
            </el-card>
          </el-col>

          <!-- 中间区域 - 地图 -->
          <el-col
            :span="12"
            style="display: flex; flex-direction: column; height: 100%"
          >
            <!-- 社会化服务资源在线分布图 -->
            <el-card class="custom-card" style="flex: 2; height: 100%">
              <div slot="header" class="card-header">
                <span style="color: #fff">社会化服务资源在线分布图</span>
              </div>
              <div
                class="map-container"
                style="width: 100%; height: 100%; min-height: 680px"
                ref="mapChart"
              ></div>
            </el-card>
          </el-col>

          <!-- 右侧区域 -->
          <el-col
            :span="6"
            style="display: flex; flex-direction: column; height: 100%"
          >
            <!-- 异常提醒 -->
            <el-card class="custom-card" style="flex: 1">
              <div slot="header" class="card-header">
                <span style="color: #fff">异常提醒</span>
              </div>
              <div class="alert-section">
                <div class="alert-item">
                  <div class="alert-icon">
                    <i class="el-icon-warning-outline"></i>
                  </div>
                  <div class="alert-content-wrapper">
                    <div class="alert-title">订单超时</div>
                    <div class="alert-detail">东至县七君子家庭农场</div>
                    <div class="alert-time">2023/12/6</div>
                  </div>
                </div>
                <div class="alert-item">
                  <div class="alert-icon">
                    <i class="el-icon-error"></i>
                  </div>
                  <div class="alert-content-wrapper">
                    <div class="alert-title">服务反馈异常</div>
                    <div class="alert-detail">江苏正欣现代农业有限公司</div>
                    <div class="alert-time">2023/12/6</div>
                  </div>
                </div>
                <div class="alert-item">
                  <div class="alert-icon">
                    <i class="el-icon-clock"></i>
                  </div>
                  <div class="alert-content-wrapper">
                    <div class="alert-title">订单超时未完成</div>
                    <div class="alert-detail">青阳县曹氏农业服务专业合作社</div>
                    <div class="alert-time">2023/12/6</div>
                  </div>
                </div>
                <div class="alert-item">
                  <div class="alert-icon">
                    <i class="el-icon-chat-dot-round"></i>
                  </div>
                  <div class="alert-content-wrapper">
                    <div class="alert-title">客户投诉未处理</div>
                    <div class="alert-detail">东至安庆农业合作社</div>
                    <div class="alert-time">2023/12/6</div>
                  </div>
                </div>
                <div class="alert-item">
                  <div class="alert-icon">
                    <i class="el-icon-check-circle"></i>
                  </div>
                  <div class="alert-content-wrapper">
                    <div class="alert-title">订单完成，但超期2天</div>
                    <div class="alert-detail">潜山安安源农业有限公司</div>
                    <div class="alert-time">2023/12/6</div>
                  </div>
                </div>
              </div>
            </el-card>

            <!-- 订单处理进度卡片 -->
            <el-card class="custom-card" style="margin-top: 10px">
              <div slot="header" class="card-header">
                <span style="color: #fff">订单处理进度</span>
              </div>
              <div class="order-progress">
                <div class="progress-item">
                  <div class="progress-icon">
                    <i class="el-icon-s-order"></i>
                  </div>
                  <div class="progress-number">5124687</div>
                  <div class="progress-name">订单数</div>
                </div>
                <div class="progress-item">
                  <div class="progress-icon">
                    <i class="el-icon-check-circle"></i>
                  </div>
                  <div class="progress-number">4581347</div>
                  <div class="progress-name">已处理</div>
                </div>
                <div class="progress-item">
                  <div class="progress-icon">
                    <i class="el-icon-loading"></i>
                  </div>
                  <div class="progress-number">543340</div>
                  <div class="progress-name">处理中</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import getMap from "@/api/getMap";
import * as echarts from "echarts";

export default {
  name: "MonitorPage",
  data() {
    return {
      serviceResources: [],
    };
  },
  mounted() {
    this.initMapChart();
    this.initResourceChart();
  },
  methods: {
    // 初始化地图散点图
    initMapChart() {
      const mapChart = echarts.init(this.$refs["mapChart"]);

      // 显示加载动画
      mapChart.showLoading();

      // 获取中国地图数据并绘制散点图
      getMap
        .then((res) => {
          mapChart.hideLoading();

          // 注册中国地图
          echarts.registerMap("china", res.data);

          // 生成服务资源数据
          this.serviceResources = this.generateServiceResources();

          // 配置地图散点图选项
          const option = {
            backgroundColor: "#0c1e3e",
            tooltip: {
              trigger: "item",
              formatter: function (params) {
                if (params.seriesType === "scatter") {
                  return `${params.value[3]}<br/>服务次数: ${params.value[2]}次`;
                }
                return params.name;
              },
            },
            geo: {
              map: "china",
              roam: true,
              label: {
                emphasis: {
                  show: true,
                  color: "#fff",
                },
              },
              itemStyle: {
                normal: {
                  areaColor: "#142957",
                  borderColor: "#09488e",
                },
                emphasis: {
                  areaColor: "#09488e",
                },
              },
            },
            series: [
              {
                name: "服务资源",
                type: "scatter",
                coordinateSystem: "geo",
                data: this.serviceResources,
                symbolSize: function (val) {
                  return Math.max(val[2] / 100, 12);
                },
                label: {
                  show: true,
                  position: "top",
                  formatter: function (params) {
                    // 直接显示服务次数
                    return params.value[2] + "次";
                  },
                  color: "#fff",
                  fontSize: 10,
                  fontWeight: "bold",
                },
                itemStyle: {
                  // 使用渐变色填充散点
                  color: function (params) {
                    // 根据服务次数设置不同颜色
                    const value = params.value[2];
                    let baseColor = "#32cd32";
                    if (value > 2000) baseColor = "#ff4500";
                    else if (value > 1000) baseColor = "#ff7f50";
                    else if (value > 500) baseColor = "#ffd700";

                    // 创建径向渐变
                    return new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [
                      { offset: 0, color: "#fff" },
                      { offset: 0.6, color: baseColor },
                      { offset: 1, color: baseColor },
                    ]);
                  },
                  // 添加边框效果
                  borderColor: "#fff",
                  borderWidth: 1.5,
                  // 添加发光效果
                  shadowBlur: 15,
                  shadowColor: function (params) {
                    const value = params.value[2];
                    let shadowColor = "#32cd32";
                    if (value > 2000) shadowColor = "#ff4500";
                    else if (value > 1000) shadowColor = "#ff7f50";
                    else if (value > 500) shadowColor = "#ffd700";
                    return shadowColor;
                  },
                  opacity: 0.9,
                },
                emphasis: {
                  // 鼠标悬停时的强调效果
                  scale: true,
                  scaleSize: 10,
                  itemStyle: {
                    shadowBlur: 25,
                    shadowColor: function (params) {
                      const value = params.value[2];
                      let shadowColor = "#32cd32";
                      if (value > 2000) shadowColor = "#ff4500";
                      else if (value > 1000) shadowColor = "#ff7f50";
                      else if (value > 500) shadowColor = "#ffd700";
                      return shadowColor;
                    },
                  },
                  label: {
                    show: true,
                    fontSize: 12,
                    fontWeight: "bold",
                    color: "#fff",
                  },
                },
              },
              // 添加连线效果
              {
                name: "服务连线",
                type: "lines",
                coordinateSystem: "geo",
                zlevel: 2,
                symbol: ["none", "arrow"],
                symbolSize: [4, 8],
                data: this.generateLinesData(),
                lineStyle: {
                  color: "#5ac8fa",
                  width: 1,
                  curveness: 0.2,
                  opacity: 0.6,
                },
                emphasis: {
                  lineStyle: {
                    width: 3,
                    opacity: 1,
                  },
                },
              },
            ],
          };

          mapChart.setOption(option);

          // 窗口大小改变时，重新调整图表大小
          window.addEventListener("resize", () => {
            mapChart.resize();
          });
        })
        .catch((error) => {
          console.error("获取地图数据失败:", error);
          mapChart.hideLoading();
          mapChart.setOption({
            title: {
              text: "社会化服务资源在线分布图 - 数据加载失败",
              left: "center",
              textStyle: {
                color: "#ff4500",
                fontSize: 16,
              },
            },
            backgroundColor: "#0c1e3e",
          });
        });
    },

    // 初始化服务资源运行统计图
    initResourceChart() {
      // 获取图表DOM元素
      const resourceChart = echarts.init(this.$refs.resourceChart);

      // 图表配置
      const option = {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["种植", "农药", "耕作", "飞防", "收割", "储藏"],
          axisLine: {
            lineStyle: {
              color: "#58719b",
            },
          },
          axisLabel: {
            color: "#fff",
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#58719b",
            },
          },
          axisLabel: {
            color: "#fff",
          },
          splitLine: {
            lineStyle: {
              color: "#1e3c6d",
            },
          },
        },
        series: [
          {
            name: "服务资源数量",
            type: "bar",
            data: [1245, 1557, 4585, 3268, 1280, 2584],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#29ccff" },
                { offset: 1, color: "#106fd8" },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#36d8ff" },
                  { offset: 1, color: "#1977ed" },
                ]),
              },
            },
          },
        ],
      };

      // 设置图表配置
      resourceChart.setOption(option);

      // 响应式处理
      window.addEventListener("resize", () => {
        resourceChart.resize();
      });
    },

    // 生成模拟的服务资源数据
    generateServiceResources() {
      // 中国主要城市的经纬度和服务次数
      const cityData = [
        [116.405285, 39.904989, 2500, "北京"],
        [121.472644, 31.231706, 2200, "上海"],
        [113.280637, 23.125178, 1800, "广州"],
        [114.085947, 22.547, 1600, "深圳"],
        [104.065735, 30.659462, 1500, "成都"],
        [120.153576, 30.287459, 1400, "杭州"],
        [114.305523, 30.59285, 1300, "武汉"],
        [108.948024, 34.263161, 1200, "西安"],
        [106.504962, 29.533155, 1100, "重庆"],
        [118.767413, 32.041544, 1000, "南京"],
        [117.190182, 39.125596, 950, "天津"],
        [120.619585, 31.298863, 900, "苏州"],
        [112.982279, 28.19409, 850, "长沙"],
        [120.382661, 36.101009, 800, "青岛"],
        [113.665412, 34.757975, 750, "郑州"],
        [113.749638, 23.049663, 700, "东莞"],
        [121.548884, 29.868333, 650, "宁波"],
        [113.122959, 23.029663, 600, "佛山"],
        [117.283042, 31.86119, 550, "合肥"],
        [121.614624, 38.913419, 500, "大连"],
      ];

      return cityData;
    },

    // 生成连线数据
    generateLinesData() {
      // 北京坐标
      const beijing = [116.405285, 39.904989];

      // 所有点都只连接北京
      const linesData = [
        { from: beijing, to: [121.472644, 31.231706] }, // 北京-上海
        { from: beijing, to: [113.280637, 23.125178] }, // 北京-广州
        { from: beijing, to: [114.085947, 22.547] }, // 北京-深圳
        { from: beijing, to: [104.065735, 30.659462] }, // 北京-成都
        { from: beijing, to: [108.948024, 34.263161] }, // 北京-西安
        { from: beijing, to: [120.153576, 30.287459] }, // 北京-杭州
        { from: beijing, to: [118.767413, 32.041544] }, // 北京-南京
        { from: beijing, to: [114.305523, 30.59285] }, // 北京-武汉
        { from: beijing, to: [106.504962, 29.533155] }, // 北京-重庆
        { from: beijing, to: [117.190182, 39.125596] }, // 北京-天津
      ];

      return linesData.map((line) => ({
        coords: [line.from, line.to],
      }));
    },
  },
};
</script>

<style scoped>
/* 监控页面样式 */
#monitor-page {
  height: 105%;
  background: linear-gradient(135deg, #0a1326 0%, #0c1e3e 100%);
  overflow: hidden;
  position: relative;
}

#monitor-page::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
      circle at 20% 80%,
      rgba(41, 196, 255, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(255, 120, 0, 0.08) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 40% 40%,
      rgba(27, 132, 237, 0.05) 0%,
      transparent 50%
    );
  pointer-events: none;
}

/* 自定义卡片样式 */
.custom-card {
  background: linear-gradient(
    135deg,
    rgba(12, 30, 62, 0.9) 0%,
    rgba(8, 20, 45, 0.9) 100%
  );
  border: 1px solid rgba(20, 56, 126, 0.6);
  border-radius: 12px;
  color: #fff;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.custom-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(90, 200, 250, 0.8) 50%,
    transparent 100%
  );
}

.custom-card:hover {
  border-color: rgba(90, 200, 250, 0.8);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(90, 200, 250, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

/* 卡片头部样式 */
.card-header {
  background: linear-gradient(
    135deg,
    rgba(10, 23, 48, 0.9) 0%,
    rgba(14, 32, 70, 0.9) 100%
  );
  border-bottom: 1px solid rgba(20, 56, 126, 0.6);
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px 12px 0 0;
  position: relative;
  display: flex;
  align-items: center;
}

.card-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background: linear-gradient(180deg, #5ac8fa 0%, #1b84ed 100%);
  border-radius: 2px;
}

.card-header span {
  margin-left: 12px;
  background: linear-gradient(90deg, #fff 0%, #8cb3d9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 服务资源统计样式 */
.service-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 16px;
  padding: 20px;
  height: 100%;
}

.stat-item {
  background: linear-gradient(
    135deg,
    rgba(10, 23, 48, 0.8) 0%,
    rgba(14, 32, 70, 0.8) 100%
  );
  padding: 20px 15px;
  border-radius: 10px;
  border: 1px solid rgba(20, 56, 126, 0.5);
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ff7800, #1b84ed);
  opacity: 0.7;
}

.stat-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  border-color: rgba(90, 200, 250, 0.6);
}

.stat-item:nth-child(odd)::before {
  background: linear-gradient(90deg, #ff7800, #ff3b30);
}

.stat-item:nth-child(even)::before {
  background: linear-gradient(90deg, #1b84ed, #29ccff);
}

.stat-number {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  position: relative;
}

.stat-number::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0.6;
}

.stat-name {
  font-size: 14px;
  color: #8cb3d9;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.orange {
  background: linear-gradient(90deg, #ff7800, #ff3b30);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.blue {
  background: linear-gradient(90deg, #1b84ed, #29ccff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 地图容器样式 */
.map-container {
  flex: 1;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}

/* 图表容器样式 */
.chart-container {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}

/* 异常提醒样式 */
.alert-section {
  padding: 16px;
  height:53%;
  overflow-y: auto;
}

.alert-item {
  background: linear-gradient(
    135deg,
    rgba(10, 23, 48, 0.8) 0%,
    rgba(14, 32, 70, 0.8) 100%
  );
  border: 1px solid rgba(20, 56, 126, 0.5);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.alert-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ff7800, #ff3b30);
}

.alert-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 120, 0, 0.6);
}

.alert-item:nth-child(2)::before {
  background: linear-gradient(90deg, #ff3b30, #ff1a1a);
}

.alert-item:nth-child(3)::before {
  background: linear-gradient(90deg, #1b84ed, #0056b3);
}

.alert-item:nth-child(4)::before {
  background: linear-gradient(90deg, #ffd700, #ffa500);
}

.alert-item:nth-child(5)::before {
  background: linear-gradient(90deg, #32cd32, #228b22);
}

.alert-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgba(255, 120, 0, 0.2) 0%,
    rgba(255, 59, 48, 0.2) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  flex-shrink: 0;
  color: #ff7800;
  font-size: 22px;
  box-shadow: 0 4px 8px rgba(255, 120, 0, 0.2);
  transition: all 0.3s ease;
}

.alert-item:hover .alert-icon {
  transform: scale(1.1);
  box-shadow: 0 6px 12px rgba(255, 120, 0, 0.3);
}

.alert-item:nth-child(2) .alert-icon {
  background: linear-gradient(
    135deg,
    rgba(255, 59, 48, 0.2) 0%,
    rgba(255, 26, 26, 0.2) 100%
  );
  color: #ff3b30;
  box-shadow: 0 4px 8px rgba(255, 59, 48, 0.2);
}

.alert-item:nth-child(3) .alert-icon {
  background: linear-gradient(
    135deg,
    rgba(27, 132, 237, 0.2) 0%,
    rgba(0, 86, 179, 0.2) 100%
  );
  color: #1b84ed;
  box-shadow: 0 4px 8px rgba(27, 132, 237, 0.2);
}

.alert-item:nth-child(4) .alert-icon {
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.2) 0%,
    rgba(255, 165, 0, 0.2) 100%
  );
  color: #ffd700;
  box-shadow: 0 4px 8px rgba(255, 215, 0, 0.2);
}

.alert-item:nth-child(5) .alert-icon {
  background: linear-gradient(
    135deg,
    rgba(50, 205, 50, 0.2) 0%,
    rgba(34, 139, 34, 0.2) 100%
  );
  color: #32cd32;
  box-shadow: 0 4px 8px rgba(50, 205, 50, 0.2);
}

.alert-content-wrapper {
  flex: 1;
}

.alert-title {
  font-size: 15px;
  font-weight: 600;
  color: #ff7800;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}

.alert-item:nth-child(2) .alert-title {
  color: #ff3b30;
}

.alert-item:nth-child(3) .alert-title {
  color: #1b84ed;
}

.alert-item:nth-child(4) .alert-title {
  color: #ffd700;
}

.alert-item:nth-child(5) .alert-title {
  color: #32cd32;
}

.alert-detail {
  font-size: 14px;
  color: #e6f7ff;
  margin-bottom: 6px;
  line-height: 1.4;
  font-weight: 500;
}

.alert-time {
  font-size: 12px;
  color: #8cb3d9;
  font-weight: 500;
}

/* 订单处理进度样式 */
.order-progress {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px 16px;
  height: 100%;
  min-height: 140px;
}

.progress-item {
  background: linear-gradient(
    135deg,
    rgba(10, 23, 48, 0.8) 0%,
    rgba(14, 32, 70, 0.8) 100%
  );
  border: 1px solid rgba(20, 56, 126, 0.5);
  border-radius: 12px;
  padding: 20px 12px;
  text-align: center;
  flex: 1;
  margin: 0 8px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.progress-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #1b84ed, #29ccff);
}

.progress-item:hover {
  background: linear-gradient(
    135deg,
    rgba(14, 32, 70, 0.9) 0%,
    rgba(20, 45, 90, 0.9) 100%
  );
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  border-color: rgba(27, 132, 237, 0.6);
}

.progress-item:nth-child(2)::before {
  background: linear-gradient(90deg, #32cd32, #00ff00);
}

.progress-item:nth-child(3)::before {
  background: linear-gradient(90deg, #ffa500, #ffd700);
}

.progress-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgba(27, 132, 237, 0.2) 0%,
    rgba(41, 204, 255, 0.2) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  color: #1b84ed;
  font-size: 20px;
  box-shadow: 0 4px 8px rgba(27, 132, 237, 0.2);
  transition: all 0.3s ease;
}

.progress-item:hover .progress-icon {
  transform: scale(1.1);
  box-shadow: 0 6px 12px rgba(27, 132, 237, 0.3);
}

.progress-item:nth-child(2) .progress-icon {
  background: linear-gradient(
    135deg,
    rgba(50, 205, 50, 0.2) 0%,
    rgba(0, 255, 0, 0.2) 100%
  );
  color: #32cd32;
  box-shadow: 0 4px 8px rgba(50, 205, 50, 0.2);
}

.progress-item:nth-child(3) .progress-icon {
  background: linear-gradient(
    135deg,
    rgba(255, 165, 0, 0.2) 0%,
    rgba(255, 215, 0, 0.2) 100%
  );
  color: #ffa500;
  box-shadow: 0 4px 8px rgba(255, 165, 0, 0.2);
}

.progress-number {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.5px;
}

.progress-name {
  font-size: 13px;
  color: #8cb3d9;
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* 滚动条样式 */
.alert-section::-webkit-scrollbar {
  width: 6px;
}

.alert-section::-webkit-scrollbar-track {
  background: rgba(10, 23, 48, 0.5);
  border-radius: 3px;
}

.alert-section::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #1b84ed, #29ccff);
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.alert-section::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #29ccff, #5ac8fa);
}

/* 响应式优化 */
@media (max-width: 1600px) {
  .service-stats {
    grid-gap: 12px;
    padding: 16px;
  }

  .stat-number {
    font-size: 24px;
  }

  .progress-number {
    font-size: 18px;
  }
}

@media (max-width: 1400px) {
  .service-stats {
    grid-template-columns: 1fr;
  }

  .order-progress {
    flex-direction: column;
    gap: 12px;
  }

  .progress-item {
    margin: 0;
    width: 100%;
  }
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.custom-card {
  animation: fadeInUp 0.6s ease-out;
}

.stat-item,
.alert-item,
.progress-item {
  animation: fadeInUp 0.8s ease-out;
}

/* 加载状态 */
.loading {
  position: relative;
  overflow: hidden;
}

.loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
</style>
